<template>
  <!-- 添加或修改参数配置对话框 -->
  <el-dialog title="分配角色" :visible.sync="visible" width="500px" append-to-body :close-on-click-modal="false" @closed="reset">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户工号">
        <el-input v-model="form.loginName" :disabled="true"/>
      </el-form-item>
      <el-form-item label="用户姓名">
        <el-input v-model="form.userName" :disabled="true"/>
      </el-form-item>
      <el-form-item label="角色">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="form.roleIds" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="role in roleOptions" :label="role.id" :key="role.id">{{role.roleName}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="submitting" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listRole } from "@/api/system/role";
import { getUser, updateUserRoles } from "@/api/system/user";

export default {
  name: "editUserRole",
  data() {
    return {
      userId: undefined,
      visible: false,
      submitting: false,
      roleOptions: [],
      checkAll: false,
      isIndeterminate: false,
      // 表单参数
      form: {
        loginName: undefined,
        userName: undefined,
        roleIds: []
      }
    }
  },
  methods: {
    init(userId) {
      this.visible = true;
      this.userId = userId;
      this.initRoles();
      this.initData();
    },
    initData() {
      getUser(this.userId).then(res => {
        this.form.loginName = res.user.loginName;
        this.form.userName = res.user.userName;

        const roleIds = [];
        this.$lodash.each(res.roles, item => {
          roleIds.push(item.roleId);
        });
        this.$nextTick(() => {
          this.form.roleIds = roleIds;
        });
      });
    },
    initRoles() {
      listRole({
        page: false,
        status: "0"
      }).then(res => {
        this.roleOptions = res;
      })
    },
    close() {
      this.visible = false;
    },
    submitForm() {
      this.submitting = true;
      updateUserRoles(this.userId, this.form).then(response => {
        this.submitting = false;

        this.msgSuccess("修改成功");
        this.close();
        this.$emit('success');
      }).catch(() => {
        this.submitting = false;
      });
    },
    // 表单重置
    reset() {
      this.userId = undefined;
      this.form = {
        roleIds: []
      };
      this.resetForm("form");
    },
    handleCheckAllChange(val) {
      const roleIds = [];
      this.$lodash.each(this.roleOptions, item => {
        roleIds.push(item.id);
      });
      this.form.roleIds = val ? roleIds : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.roleOptions.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.roleOptions.length;
    }
  }
};
</script>

<style scoped>

</style>
